<template>
  <div class="todo-info">
    <span>{{ total }} items left</span>
    <div class="tab">
      <a
        href="#"
        v-for="(text, index) in btns"
        :key="index"
        :class="text == clicked ? 'current' : ''"
        @click.prevent="handleClick(text)"
        >{{ text }}</a
      >
    </div>
    <button class="clear" @click="$emit('clear')">Clear Completed</button>
  </div>
</template>

<script>
export default {
  name: "TodoInfo",
  props: {
    total: {
      type: Number,
      require: true,
    },
  },
  data() {
    return {
      btns: ["all", "active", "completed"],
      clicked: "all",
    };
  },
  methods: {
    handleClick(text) {
      this.clicked = text;
      this.$emit("alter", text);
    },
  },
};
</script>

<style lang="stylus">
@import '~styles/theme.styl'
@import '~styles/typeface.styl'
@import '~styles/mixins.styl'
.todo-info
  display:flex
  justify-content:space-between
  align-items center
  height 30px
  padding 5px 15px
  span
    color $yellow
  .tab
    display: flex
    justify-content: space-around
    width 200px
    a
      padding 5px 10px
      border: 1px solid $lightred
      text-decoration: none
      color: #fff
      border-radius: 5px
      &.current
        background-color rgba(249, 205, 173,.7)
  .clear
    //  padding 5px 10px
    //  border: 1px solid $green
    //  background-color $green
    //  color: #fff
    //  border-radius: 5px
    //  cursor pointer
    infoBtn()
</style>
